<template>
    <div>
        <SuperTable ref="table" path="notice/partnerNotify/index" :params="params" :columns="columns">
            <Button slot="header-left" type="primary" @click="showModal = true">发送公告</Button>
        </SuperTable>
        <Modal title="发送公告" v-model="showModal" :width="500" @on-cancel="handleCancel">
            <!-- <Alert type="warning"></Alert> -->
            <Form ref="form" :model="form" :rules="rules" :label-width="80">
                <FormItem label="公告标题" prop="title">
                    <Input v-model="form.title" maxlength="50" show-word-limit/>
                </FormItem>
                <FormItem label="公告内容" prop="content">
                    <Input v-model="form.content" :rows="8" type="textarea" maxlength="500" show-word-limit placeholder="请填写公告内容"  />
                </FormItem>
                <FormItem label="链接地址" prop="url">
                    <Input v-model="form.url" placeholder="链接地址">
                        <Button type="info" slot="append" @click="handleOpenModal">跳转项目</Button>
                    </Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button :disabled="submiting" @click="handleCancel">取消</Button>
                <Button type="primary" :loading="submiting" @click="handleSubmit">提交</Button>
            </div>
        </Modal>
        <Modal
            v-model="showProjectModal"
            title="选择商品"
            width="1200px"
            @on-cancel="handleCancelSelect"
        >
            <ProjectSelect ref="projectModal" :value="selectProject"></ProjectSelect>
            <div slot="footer">
                <Button @click="handleCancelSelect">取消</Button>
                <Button type="primary" @click="handleSelect">确认</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
import ProjectSelect from '@/components/selector/project-select.vue';
export default {
    components: {
        SuperTable,
        ProjectSelect
    },
    data() {
        return {
            selectProject: [],
            showProjectModal: false,
            submiting: false,
            showModal: false,
            form: {
                id: '',
                title: '',
                content: '',
                url: '',
            },
            rules: {
                title: [
                    {required: true, message: '请输入公告标题', trigger: 'blur'}
                ],
                content: [
                    {required: true, message: '请输入公告内容', trigger: 'blur'}
                ]
            },
            params: {
                page: 1,
                pageSize: 10
            },
            columns: [
                {
                    title: '标题',
                    key: 'title'
                },
                {
                    title: '内容',
                    render: (h, params) => {
                        let content = params.row.content
                        content = content.length <= 50 ? content : content.substring(0, 50) + '...';
                        let Ptext = [
                            h('span',content)
                        ];
                        if (content.length > 50){
                            Ptext.push(
                                h("Poptip", {
                                    props:{
                                        transfer: true,
                                        width: '400',
                                        placement: 'right',
                                        trigger: 'hover',
                                        content: params.row.content,
                                        wordWrap: true
                                    }
                                }, [
                                    h("a",'更多')
                                ])
                            )
                        }
                        return h('p', Ptext);
                    }
                },
                {
                    title: '链接',
                    render: (h, params) => {
                        return h('a',{
                            attrs:{
                                target:'__blank',
                                href: params.row.url
                            }
                        }, params.row.url);
                    }
                },
                {
                    title: '发送人',
                    render: (h, params) => {
                        return h('span', params.row.admin ? params.row.admin.nickname : '');
                    }
                },
                {
                    title: '发送时间',
                    key: 'created_at'
                },
            ]
        };
    },
    mounted() {

    },
    methods: {
        handleSetProject() {
            let id = 0;
            if (this.form.url.indexOf('https://m.piaopiaodao.com/pages/goods/detail?id=') !== -1){
                let params = this.getUrlParams(this.form.url);
                id = params.id;
            }
            //获取商品详情
            this.$ajax.get('/project/read/'+id).then(res => {
                this.selectProject = res ? [res] : [];
            }).catch(err => {
            })
        },
        getUrlParams(url) {
            const regex = /[?&]([^=#]+)=([^&#]*)/g;
            let params = {};
            let match;
            while ((match = regex.exec(url))) {
                params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
            }
            return params;
        },
        handleOpenModal() {
            this.$refs.projectModal.init();
            this.showProjectModal = true;
        },
        handleCancelSelect() {
            this.$refs.projectModal.clear();
            this.showProjectModal = false;
        },
        handleSelect() {
            let res = this.$refs.projectModal.getCheckeds();
            this.selectProject = res;
            this.form.url = 'https://m.piaopiaodao.com/pages/goods/detail?id=' + res[0].id;
            this.handleCancelSelect();
        },
        handleSubmit() {
            if(this.submiting) return false;
            this.$refs.form.validate((valid) => {
                if(valid) {
                    const { form } = this;
                    let params = {
                        title: form.title,
                        content: form.content,
                        url: form.url,
                    }
                    this.submiting = true;
                    this.$ajax.post('/notice/partnerNotify/send', params).then(res => {
                        this.$Message.success('发送成功');
                        this.handleCancel();
                        this.$refs.table.init();
                        this.submiting = false;
                    }).catch(err => {
                        this.submiting = false;
                        this.$Message.error(err.message || '发送失败');
                    })
                }
            })
        },
        handleCancel() {
            this.showModal = false;
            setTimeout(() => {
                this.form.title = '';
                this.form.content = '';
                this.form.url = '';
                this.selectProject = [];
            }, 300)
        }
    }
};
</script>